<!-- 
 @Author: Havery 
 @Date: 2021-01-08 11:30:38  
 @function:个人资料
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form
      label-width="120px"
      ref="modifyInfo"
      :rules="formInfoRules"
      :model="formInfo"
    >
      <el-row>
        <el-col :span="8">
          <div class="image-header">
            <el-row>
              <img :src="formData.pictureurl" class="bgimg" alt />
            </el-row>
            <el-row>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账号：" prop="name">
            <label slot="label"
              >账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label
            >
            <el-input
              v-model="formInfo.name"
              autocomplete="off"
              size="mini"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="实际姓名：" prop="realname">
            <el-input
              v-model="formInfo.realname"
              autocomplete="off"
              size="mini"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码：" prop="mobile_phone">
            <el-input
              v-model="formInfo.mobile_phone"
              autocomplete="off"
              size="mini"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="idnumber">
            <el-input
              v-model="formInfo.idnumber"
              autocomplete="off"
              size="mini"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="性别：" prop="gender">
            <label slot="label"
              >性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label
            >
            <el-radio-group v-model="formInfo.gender" disabled>
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱：">
            <label slot="label"
              >邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label
            >
            <el-input
              v-model="formInfo.email"
              autocomplete="off"
              size="mini"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="所属部门：">
          <Treeselect
            :options="listData.listDepartmentData"
            :normalizer="normalizer"
            v-model="formInfo.departmentList"
            clearable
            disabled
          >
          </Treeselect>
        </el-form-item>
        <el-form-item label="所属岗位：">
          <el-select
            v-model="formInfo.postList"
            multiple
            style="width: 100%"
            size="mini"
            disabled
          >
            <el-option
              v-for="item in listData.listPostData"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属角色：">
          <el-select
            v-model="formInfo.roleList"
            multiple
            style="width: 100%"
            size="mini"
            disabled
          >
            <el-option
              v-for="item in listData.listRoleData"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户描述：">
          <el-input
            type="textarea"
            v-model="formInfo.user_describe"
            rows="3"
            autocomplete="off"
            maxlength="200"
            show-word-limit
            size="mini"
            disabled
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button
        size="mini"
        type="primary"
        :loading="loading"
        @click="submitForm('modifyInfo')"
        >保存</el-button
      >
    </div>

    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      :modal="false"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <ImageCropperForm
        v-bind:imageUploadInfo="mediaInfo"
        @callBack="callBack"
      ></ImageCropperForm>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "js-md5";
import HomeHttp from "@/api/home/index"; //http
import ImageCropperForm from "@/components/common/imageCropper"; //图片上传

import Treeselect from "@riophae/vue-treeselect"; //多选组件
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; //import the styles

//定义变量
const {
  loadDepartmentTreeList,
  loadPostTreeListInfo,
  loadRoleTreeListInfo,
  loadUserSingle,
} = HomeHttp;

export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  components: {
    ImageCropperForm,
    Treeselect,
  },
  data() {
    return {
      formInfo: {},
      inputDisabled: true,
      loading: false, //是显示加载
      formData: {
        pictureurl: require("@/assets/images/userpic.jpg"),
      },
      normalizer(node) {
        //转换分类树状信息列的格式
        //去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        };
      },
      listData: {
        listDepartmentData: [], //所属部门
        listPostData: [], //岗位列表信息
        listRoleData: [], //所属角色
      },
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: "",
      },
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    this.loadDepartTreeList();
    this.loadPostTreeList();
    this.loadRoleTreeListInfo();
    this.loadUserSingle();
  },
  methods: {
    //获取个人信息
    loadUserSingle() {
      loadUserSingle().then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.formInfo = data.Data;
          if (this.formInfo.department_ids != "") {
            this.formInfo.departmentList = this.formInfo.department_ids.split(
              ","
            );
          }
          if (this.formInfo.post_ids != "") {
            this.formInfo.postList = this.formInfo.post_ids.split(",");
          }
          if (this.formInfo.role_ids != "") {
            this.formInfo.roleList = this.formInfo.role_ids.split(",");
          }
          this.formData.pictureurl =this.$store.getters.fileServerURI+this.formInfo.picture_url;
        } else {
          this.$messageTip.warning(data.Msg);  
        }
      });
    },
    //获取组织树
    loadDepartTreeList() {
      let self = this;
      let par = {};
      loadDepartmentTreeList(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          self.listData.listDepartmentData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg); 
        }
      });
    },
    //岗位列表
    loadPostTreeList() {
      let self = this;
      let par = {};
      loadPostTreeListInfo(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          self.listData.listPostData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg); 
        }
      });
    },
    //角色列表
    loadRoleTreeListInfo() {
      let self = this;
      let par = {};
      loadRoleTreeListInfo(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          self.listData.listRoleData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg); 
        }
      });
    },    
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
  },
};
</script>
<style lang="scss" scoped>
.image-header {
  min-height: 120px;
  margin-left: 110px;
}
.image-header .bgimg {
  height: 120px;
  width: 120px;
}
</style>
<style  >
</style>